<template>
    <fieldset>
        <legend>三级联动</legend>
        省：{{sel1}}
        <select v-model="sel1" @change="provienceChange(sel1)">
            <option v-for="item in provience" :key="item.id" :value="item.id">{{item.name}}</option>
        </select>
        市：
        <select v-model="sel2" @change="provienceChange2(sel2)">
            <option v-for="item in citys" :key="item.id" :value="item.id">{{item.name}}</option>
        </select>
        区/县：{{sel3}}
        <select v-model="sel3">
            <option v-for="(item,index) in area" :key="item.id" :value="item.id">{{item.name}}</option>
        </select>

    </fieldset>
</template>
<script>
import * as api from "@/api/select"
export default{
    data(){
        return {
            //省的数据
            provience:[],
            //市的数据
            citys:[],
            area:[],
            sel1:1,
            sel2:"",
            sel3:""
        }
    },
    mounted(){
        api.fetchData()
           .then(res=>{
            //    console.log(res)
               //获取了所有的数据
               
               this.provience=res
               //获取默认第一条的id
               let pid=res[0].id
               this.provienceChange(pid)
           })
    },
    methods:{
        provienceChange(pid){
            //选择的省变化的时候，获取选择的省对应的id，发起请求，请求市的数据
            api.fetchCity(pid)
           .then(res=>{
            //   console.log(res)
              this.citys=res
              //默认选中
              if(res.length>0){
                 this.sel2=res[0].id
              }
              //获取默认第一条的id
              let aid=res[0].id
               this.provienceChange2(aid)
           })
        },
        provienceChange2(aid){
            api.fetchArea(aid)
            .then(res=>{
                console.log(res)
                this.area=res
                if(res.length>0){
                    this.sel3=res[0].id
                    console.log(this.sel3)
                }
            })
        }
    }
}
</script>
<style scoped>
   select {
      width:100px;
   }
</style>